<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="wrapper">
        <form action="/news/register1/" method="post">
            {% csrf_token %}
            <div>
                用户名: <input type="text" name="userName">
                <span class="usererr"></span>
            </div>
            <div>
                密码: <input type="text" name="password">
                <span class="pwderr"></span>
            </div>  
            <div>
                email: <input type="text" name="email">
            </div> 
            <div>
                角色:
                <input type="radio" name="userType" value="0">后台
                <input type="radio" name="userType" value="1">前台
            </div> 
            <div>
                <input type="submit" value="注册">
            </div>
        </form>
    </div>
{% if err %}
    {{ err }}
{% endif %}
</body>
    <script>
        let _password=document.querySelector('input[name=password]')
        let _pwderr=document.querySelector('.pwderr')
        _password.onblur=function(){
            checkPassword()
        }
        //检测密码
        function checkPassword(){
            _pwderr.innerHTML='' //重新验证前清空提示
            let password=_password.value
            if(!password){
                _password.innerHTML='密码不为空'
                return false
            }
            let reg=/^\d{3,6}$/
            if(!reg.test(password)){
                _pwderr.innerHTML='密码是3-6位数字'
                return false
            }
            return true
        }
        let _userName=document.querySelector('input[name=userName]')
        let _usererr=document.querySelector('.usererr')
        _userName.onblur=function(){
            checkUserName()
        }
        //检测密码
        function checkUserName(){
            _usererr.innerHTML='' //重新验证前清空提示
            let userName=_userName.value
            if(!userName){
                _usererr.innerHTML='用户名不能为空'
                return false
            }
            let reg=/^\w{2,6}$/
            if(!reg.test(userName)){
                _usererr.innerHTML='用户名是2-6位字母数字下划线组合'
                return false
            }
            return true
        }
        let _form=document.querySelector('form')
        _form.onsubmit=function (){
            if(checkUserName()&&checkPassword()){
                return true //提交
            }
            return false
        }
    </script>
</html>